<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>register Page | Amaze UI Example</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="alternate icon" type="image/png" href="__PUBLIC__/vendor/assets/i/favicon.png">
    <link rel="stylesheet" href="__PUBLIC__/vendor/assets/css/amazeui.min.css"/>
    <style>
        .header {
            text-align: center;
        }

        .header h1 {
            font-size: 200%;
            color: #333;
            margin-top: 30px;
        }

        .header p {
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="am-g">
        <h1>Web ide</h1>
        <p>Integrated Development Environment<br/>代码编辑，代码生成，界面设计，调试，编译</p>
    </div>
    <hr/>
</div>
<div class="am-g">
    <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">
        <h3>注册</h3>
        <hr>
        <div class="am-btn-group">
            <a href="#" class="am-btn am-btn-secondary am-btn-sm"><i class="am-icon-github am-icon-sm"></i> Github</a>
            <a href="#" class="am-btn am-btn-success am-btn-sm"><i class="am-icon-google-plus-square am-icon-sm"></i>
                Google+</a>
            <a href="#" class="am-btn am-btn-primary am-btn-sm"><i class="am-icon-stack-overflow am-icon-sm"></i>
                stackOverflow</a>
        </div>
        <br>
        <br>

        <form method="post" class="am-form">
            <label>用户名:</label>
            <input type="text" id="username" placeholder="请输入用户名">
            <br>
            <label>邮箱:</label>
            <input type="text" id="email" placeholder="请输入邮箱">
            <br>
            <label>手机号:</label>
            <input type="text" id="mobile" placeholder="请输入手机号">
            <br>
            <label>密码:</label>
            <input type="password" id="password" placeholder="请输入密码">
            <br>
            <label>确认密码:</label>
            <input type="password" id="check_password" placeholder="请再次输入密码">
            <br>
            <div class="am-cf">
                <input type="submit" name="" value="注 册" class="am-btn am-btn-primary am-btn-sm am-fl submit">
                <a href="{{:U('User/login')}}" class="am-btn am-btn-info am-btn-sm am-fr">已有账号，点我登录 ^_^?</a>
            </div>
        </form>
        <hr>
        <p>© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
    </div>
</div>
<script src="__PUBLIC__/vendor/assets/js/jquery.min.js"></script>
<script>
        $(function(){
           $(".submit").click(function(){
               //获取表单的值
               var info = {
                   'username': $("#username").val(),
                   'password': $("#password").val(),
                   'check_password': $("#check_password").val(),
                   'email': $("#email").val(),
                   'mobile': $("#mobile").val(),
               };
//               console.log(info);
               if(info.username.length<6){
                  alert('用户名长度不能小于6位');
                  return false;
               }
               if(info.password.length < 6){
                   alert('密码不能小于6位');
                   return false;
               }
               if(info.password!==info.check_password){
                   alert('两次密码输入不一致');
                   return false;
               }
               var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
               if(!myreg.test(info.email)) {
                       alert('请输入正确的E-Mail地址');
                   return false;
               }
               var phoneNum = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
               if(!phoneNum.test(info.mobile)) {
                   alert('请输入正确的手机号');
                   return false;
               }
               $.post("{{:U('ajax_register')}}",info,function(data){
                   if(data.status=1){
                       alert(data.msg);
                       location.href="{{:U('User/login')}}";
                   }else{
                       alert(data.msg);
                   }
               });
               return false;
           })
        })
</script>
</body>
</html>
